<template>
  <div class="p-4">
    <Card :loading="loading" title="班主任实习工作">
      <template #extra>
        <a-button v-auth="'ROLE_INSTRUCTOR'" type="primary" @click="handleEditScore">评分</a-button>
        <a-button v-auth="'ROLE_CAPTAIN'" type="primary" @click="handleEditRemark"
          >编辑小组评价
        </a-button>
        <a-button type="primary" @click="handleReturn">返回</a-button>
      </template>
      <Description @register="registerDesc" :column="2" size="middle" />
      <ScoreModal @register="registerScoreModal" />
      <RemarkModal @register="registerRemarkModal" />
    </Card>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from "vue";
  import { Card } from "ant-design-vue";
  import { useTabs } from "/@/hooks/web/useTabs";
  import { useModal } from "/@/components/Modal";
  import { useRoute, useRouter } from "vue-router";
  import ScoreModal from "/@/views/default/practical/ScoreEdit.vue";
  import { Description, useDescription } from "/@/components/Description";
  import RemarkModal from "/@/views/default/practical/RemarkEdit.vue";
  import { leaderWorkDescSchema } from "/@/views/teacher/practical/member/member.data";
  import { getLeaderWorkInfoByUserIdApi, getLeaderWorkScoreApi } from "/@/api/core/leaderWork";
  import { PracTypeEnum } from "/@/enums/typeEnum";

  const descData = ref<any>({});
  const loading = ref(false);

  const route = useRoute();
  const router = useRouter();
  const { userId } = route.query;

  onMounted(async () => {
    loading.value = true;
    try {
      descData.value = await getLeaderWorkInfoByUserIdApi(userId as unknown as number);
    } finally {
      loading.value = false;
    }
  });

  const [registerDesc] = useDescription({
    data: descData,
    schema: leaderWorkDescSchema,
  });

  const [registerScoreModal, { openModal: openScoreModal }] = useModal();
  const [registerRemarkModal, { openModal: openRemarkModal }] = useModal();

  async function handleEditScore(record) {
    const score = await getLeaderWorkScoreApi(record.userId);
    openScoreModal(true, { score, target: PracTypeEnum.LeaderWork, params: { userId } });
  }

  function handleEditRemark() {
    openRemarkModal(true, {
      userId,
      groupEvaluation: descData.value.groupEvaluation,
      target: PracTypeEnum.LeaderWork,
    });
  }

  const { closeCurrent } = useTabs();

  function handleReturn() {
    closeCurrent();
    router.back();
  }
</script>

<style scoped>
  .ant-btn-primary {
    margin-left: 8px;
  }
</style>
